// 添加大咖访谈弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message } from 'antd'
import { connect } from 'react-redux'
import Ueditor from '../../components/Ueditor'
/* 引用接口文档路径 */
import {
    addMasterInterview,editMasterInterview,getPublisher
} from 'actions/materialManage'
const FormItem = Form.Item

@Form.create({
    mapPropsToFields(props) {
      return {
        publisherName: Form.createFormField({
          ...props.content,
          value: props.content.publisherName,
        }),
        publisherId: Form.createFormField({
          ...props.content,
          value: props.content.publisher,
        }),
        typeId: Form.createFormField({
          ...props.content,
          value: props.content.typeId ? String(props.content.typeId) : '',
        }),
        title: Form.createFormField({
          ...props.content,
          value: props.content.title,
        }),
      };
    } 
})

@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)


export default class ModalAddMasterInterview extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        publisherList:[],
        isChoose:false,
        detail:"",
        editPublisherId:""
      }
    }

   /*
      执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次
    */
    componentWillMount(){
      this.setState({
        detail:this.props.content.detail,
        editPublisherId:this.props.content.publisherId
      })
    }

    changePublisher(value){//选择发布人
      this.props.form.setFieldsValue({'publisherName':value.label})
      this.setState({isChoose:true})
    }

    searchPublisher=()=>{//搜索发布人列表
      this.props.form.validateFields(['publisherName'],(err, values)=>{
        if(!err){
          this.props.dispatch(getPublisher(
            {"name":values.publisherName},
            (respose) => {
              this.setState({
                publisherList:respose.respData.resultData
              })
            }))     
        }        
      })
    }

    clearPublisher=()=>{//重置发布人
      this.props.form.resetFields(['publisherId','publisherName'])
      this.setState({publisherList:[],})
      this.setState({isChoose:false})
    }

    addReportSubmit(callback,sendType,e){//新增和编辑确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                if(UE.getEditor('content').getContent() == '' || UE.getEditor('content').getContent().length == 0){
                  message.error('请输入访谈内容');
                  return;
                }
                if(this.props.type == 1){
                  if(!values.publisherId){
                    message.error('请选择发布人');
                    return;
                  }
                  var datajson = {
                    "publisherName":values.publisherName,//发布人姓名
                    "publisherId":values.publisherId.key,//发布人id
                    "typeName":'',//访谈类型
                    "typeId":values.typeId,//访谈类型ID
                    "title":values.title,//访谈标题
                    "detail":UE.getEditor('content').getContent(),//访谈内容
                    "dataStatus":sendType,//sendType提交状态3:发布 5:保存
                  }
                  //新增              
                  this.props.dispatch(addMasterInterview(
                  datajson,
                  (respose) => {
                      callback&&callback()
                      this.setState({
                        publisherList:[],
                        isChoose:false,
                      })
                      message.success(respose.respMsg);
                      this.props.ModalCancel();
                  }))
                }else{
                  var datajson = {
                    "id":this.props.content.id,//大咖访谈ID
                    "publisherName":values.publisherName,//发布人姓名
                    "publisherId":values.publisherId?values.publisherId.key:this.state.editPublisherId,//发布人id
                    "typeName":'',//访谈类型
                    "typeId":values.typeId,//访谈类型ID
                    "title":values.title,//访谈标题
                    "detail":UE.getEditor('content').getContent(),//访谈内容
                    "dataStatus":sendType,//sendType提交状态3:发布 5:保存
                  }
                  //编辑
                  this.props.dispatch(editMasterInterview(
                  datajson,
                  (respose) => {
                      callback&&callback()
                      this.setState({
                        publisherList:[],
                        isChoose:false,
                      })
                      message.success(respose.respMsg);
                      this.props.ModalCancel();
                  })) 
                }                                
            }
        });       
    }
    render () {
        const { getFieldDecorator } = this.props.form;
        const content = this.props.content;
        const formItemLayout = {
          labelCol: {
            sm: { span: 3 },
          },
          wrapperCol: {
            sm: { span: 20 },
          },
        };
        return (
            <Modal
                width={"80%"}
                wrapClassName="vertical-center-modal"
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增访谈" : "编辑访谈" }
                onCancel={this.props.ModalCancel}
                destroyOnClose={true}
                footer={
                  [
                    <Button key="cancel" type="Default"  onClick={this.props.ModalCancel}>取消</Button>,
                    <Button key="save" type="primary"  onClick={this.addReportSubmit.bind(this,this.props.callback,5)}>保存</Button>,
                    <Button key="send" type="primary"  onClick={this.addReportSubmit.bind(this,this.props.callback,3)}>提交</Button>,
                  ]
                }
            >
            <div>
              <Form>
                <FormItem label="发布人" {...formItemLayout}>
                  {
                    getFieldDecorator('publisherName', {
                    rules: [{
                        required: true,message:"请输入发布人姓名"
                      }],
                    })(
                      <Input placeholder="请输入关键字" disabled={this.state.isChoose}  size="default" style={{ width: '180px' }} />
                    )
                  }
                  <span style={{margin:"0 5px",cursor:"pointer"}} onClick={this.searchPublisher}>搜索</span>                  
                </FormItem>
                <FormItem label="发布人列表" {...formItemLayout}>
                  {
                    getFieldDecorator('publisherId', {
                    rules: [{
                        required: false,message:"请选择发布人"
                      }],
                    })(
                      <Select placeholder="请选择发布人"   labelInValue={true}   onSelect={this.changePublisher.bind(this)} style={{ width: 120 }} >
                        {
                          this.state.publisherList.map((publisherList,i)=> {
                            return(
                              <Select.Option value={publisherList.id} key={publisherList.id}>{publisherList.name}</Select.Option>
                            )
                          })
                        }
                      </Select> 
                    )
                  }             
                  <span style={{marginLeft:"4px",cursor:"pointer"}} onClick={this.clearPublisher}>重置</span>                  
                </FormItem>
                <FormItem label="访谈类型" {...formItemLayout}>
                 {
                    getFieldDecorator('typeId', {
                    rules: [{
                        required: true,message:"请选择访谈类型"
                      }],
                    })(
                      <Select placeholder="请选择访谈类型"    style={{ width: 150 }} >
                        {
                          this.props.selectTypeList.map((item,i)=> {
                            return(
                              <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                            )
                          })
                        }
                      </Select> 
                    )
                  }
                  
                </FormItem>
                <FormItem label="访谈标题" {...formItemLayout}>
                  {
                    getFieldDecorator('title', {
                    rules: [{
                        required: true,message:"请输入访谈标题"
                      }],
                    })(
                      <Input maxLength="20" placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                    )
                  }  
                </FormItem>
                <FormItem label="访谈内容" {...formItemLayout}>
                  {/* 富文本 */}                     
                  <Ueditor  id="content" value={this.state.detail} toolbars={2} height="200" />                                                    
                </FormItem>
              </Form>
            </div>
          </Modal>
        )
    }
}